<template>
  <div class="box">{{ 1 + 1 }} : {{ a }}</div>
  <div>
    <button @click="add">添加</button>
    <div>test.a {{ test?.a }}</div>
    <div>
      {{ test?.list }}
    </div>
    <div>
      {{ test?.vp.now }}
    </div>
    <button @click="() => test.m1()">添加A</button>
    <button @click="() => test.vp.play()">播放</button>
    <button @click="() => test.vp.pause()">暂停</button>
  </div>
</template>
<script>
import Test from './class/Test.class.js'
import { ref } from 'vue'
const a = ref(0)
export default {
  data() {
    return {
      a,
      b: 1,
      test: null
    }
  },
  watch: {
    'test.list': {
      handler() {
        console.log(`test.list修改了`)
      },
      deep: true
    }
  },
  methods: {
    add() {
      console.log(`helloworld`)
      console.log(this.a, a)
      a.value++
      console.log(this.b)
    }
  },
  mounted() {
    console.log(`helloworld`)
    this.test = new Test()
  }
}
</script>
<style type="text/css">
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  background: #efefef;
}
</style>
